<template>
  <div class="ntives">
    <p class="b-box_p"><span>发布需求</span></p>
    <h1 style="height:80px;line-height: 80px;font-weight: bold;">招标需求</h1>
    <!--<form id="uploadForm" enctype="multipart/form-data" style="width:100%;height:100%;">-->
    <table width="95%" height="90%" border="0" frame="border" rules="none" class="goodg">
      <tr>
        <td width="100%">
          <input type="text" style="width:0;height:0;" name="userId" value="1" />
          <label><i class="b_iddq"></i>项目类别</label>
          <el-select v-model="value" placeholder="请选择" @change="dsb3()">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              name="classification">
            </el-option>
          </el-select>

        </td>
      </tr>
      <tr>
        <td width="100%">
          <label><i class="b_iddq"></i>工程名称</label>
          <el-input v-model="input" :maxlength="50" name="projectName" placeholder="不得超过50个字符"></el-input>
          <!--<div class="error_tip"></div>-->
        </td>
      </tr>
      <tr>
        <td>
          <label><i class="b_iddq"></i>招标单位</label>
          <el-input v-model="input1" :maxlength="30" name="tenderee" placeholder="不得超过30个字符"></el-input>
          <!--<img src="../assets/abcdefg.png"/>-->
        </td>
      </tr>
      <tr>
        <td>
          <label><i class="b_iddq"></i>招标地址</label>
          <el-input v-model="input2" :maxlength="30" name="tenderAddress" placeholder="不得超过30个字符"></el-input>
        </td>
      </tr>
      <tr>
        <td>
          <label>招标代理机构</label>
          <el-input v-model="input3" :maxlength="30" name="tenderCompany" placeholder="不得超过30个字符"></el-input>
        </td>
      </tr>
      <tr>
        <td>
          <label><i class="b_iddq"></i>质量要求</label>
          <el-input v-model="input4" readonly></el-input>
        </td>
      </tr>
      <tr>
        <td>
          <label><i class="b_iddq"></i>工期时间</label>
          <el-input class="rilit" v-model="input01" name="schedule" placeholder="请输入内容"></el-input><span>日历天</span>
          <div class="error_tip" v-show="gqsj">格式错误</div>
        </td>
      </tr>

      <tr>
        <td>
          <label><i class="b_iddq"></i>合同估算价</label>
          <el-input class="rilit" name="agreementPrice" v-model="input5" @blur="htguj(input5)" placeholder="只能保留两位小数"></el-input><span>元</span>
          <div class="error_tip" v-show="htgus">X金额格式错误</div>
        </td>
      </tr>
      <tr>
        <td class="bdbdbe">
          <label style="margin-left:15%;"></label>
          <el-checkbox label="" v-model="checked1"  name="contractStatus"
          >固定总价合同</el-checkbox>
          <el-checkbox label="" v-model="checked2" name="billStatus"
          >增值专用发票</el-checkbox>
          <el-checkbox label="" v-model="checked3" name="priceStatus">超价废标
          </el-checkbox>
        </td>
      </tr>
      <tr>
      <td>
        <label><i class="b_iddq"></i>投标保证金</label>
        <el-input class="rilit_pay" name="tenderMoney" v-model="input02" @blur="bzjtb(input02)" placeholder="请输入内容"></el-input><span>元</span> <span class="rilit_paspan">(不超过招标项目估算价的2%)</span>
        <div class="error_tip" v-show="tbbzj">X金额格式错误</div>
      </td>
      </tr>
      <tr>
        <td>
          <label><i class="b_iddq"></i>项目地点</label>
          <el-input  v-model="input6" name="projectLocation" :maxlength="30" placeholder="不得超过30个字符"></el-input>
        </td>
      </tr>
      <tr>
        <td>
          <label><i class="b_iddq"></i>投标文件递交截止时间</label>
          <div class="block">
            <el-date-picker
              id="btdsa"
              v-model="value1"
              type="datetime"
              @change="dsb2"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
          <input type="text" style="width:0;height:0;" name="endDate" v-model="value101" />
        </td>
      </tr>
      <tr>
        <td>
          <label><i class="b_iddq"></i>联系人</label>
          <el-input v-model="input7" name="contactName"  placeholder="请输入姓名"></el-input>
          <div class="error_tip" v-show="lxr">姓名格式错误</div>
        </td>
      </tr>
      <tr>
        <td>
          <label><i class="b_iddq"></i>联系电话</label>
          <el-input v-model="input8" name="contactMobile"  @blur="phone1(input8)" placeholder="请输入有效的手机号"></el-input>
          <div class="error_tip" v-show="phonego">手机号码格式错误</div>
        </td>
      </tr>
      <tr>
        <td>
          <label>其他项目说明</label>
          <el-input
            name="explainl"
            type="textarea"
            resize="none"
            :rows="6"
            :autosize="{ minRows: 6, maxRows: 6}"
            :maxlength="500"
            placeholder="不得超过500个字符"
            v-model="textarea2">
          </el-input>
        </td>
      </tr>

      <tr>
        <td>
          <label><i class="b_iddq"></i>上传招标文件</label>
          <div class="fileId1_box">
          <div class="fileId1_box1">
            <input v-model="input77" id="bbq7" placeholder="只能上传 rar / zip 格式且小于10M的文件" />
            <span id="bbq8">选择文件</span>
          </div>
            <input id="fileId1" type="file" @change="doSomethingElse($event)" ref="absd" name="file_upload" />
          </div>
          <div class="error_tip" v-show="wenjian">X 上传的文件格式错误</div>
          <!--<el-upload-->
            <!--class="upload-demo"-->
            <!--ref="upload"-->
            <!--action="#"-->
            <!--:on-preview="handlePreview"-->
            <!--:on-remove="handleRemove"-->
            <!--:file-list="fileList"-->
            <!--:auto-upload="false">-->
            <!--<el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
            <!--&lt;!&ndash;<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>&ndash;&gt;-->
          <!--</el-upload>-->
        </td>
      </tr>
      <tr>
        <td>
          <label></label>
          <div style="width:36%;height:36px;float:left;margin-left: 20px;" @mouseenter="enter($event)" >
          <el-button type="success" :disabled="btnclck" id="areaSelect" @click="submitd()">确认提交</el-button>
          </div>
        </td>
      </tr>
    </table>
    <!--</form>-->
  </div>
</template>

<script>

  export default {
    data (){
      return{
        flag: 0,
        checked1:false,
        checked2:false,
        checked3:false,
        abcdegg:true,
        input:'',
        input01:'',
        input1:'',
        input2:'',
        input3:'',
        input4:'合格',
        input5:'',
        input6:'',
        input7:'',
        input8:'',
        input77:'',
        input02:'',
        fileds:'',
        wenjian:false,
        tbbzj:false,
        htgus:false,
        lxr:false,
        phonego:false,
        btnclck:false,
        gqsj:false,
        checkList: [],
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        value1: '',
        options: [{
          value: '2',
          label: '单一采购'
        }, {
          value: '3',
          label: '采购及安装'
        }, {
          value: '4',
          label: '纯劳务'
        }, {
          value: '5',
          label: '专业分包'
        }],
        value: '',
        value101: '',
        textarea2: '',
        fileList: []
      }
    },
    watch: {
      input8(val){
        if(!val) return
        if(! /^1[34578]\d{9}$/.test(val)){
//          console.log("手机号码格式错误")
          this.btnclck=true
        }else{
//          console.log(" 手机号码格式正确")
          this.phonego=false
          this.btnclck=false
        }
      },
      input(val){
        if(!val) return
        if(val.length>=50){
//            console.log("傻逼长度超出了")
        }
//        console.log(encodeURI(val))
      },
      input7(val){
        if(!val) return
        if(!/^[\u4E00-\u9FA5]{1,6}$/.test(val)||val.length>4){
//          console.log("姓名格式错误")
          this.lxr=true
          this.btnclck=true
        }else{
          this.lxr=false
          this.btnclck=false
        }
      },
      input01(val){
        if(!val) return
        if(!/^[0-9]*$/.test(val)){
//          console.log("格式错误")
          this.gqsj=true
          this.btnclck=true
        }else{
          this.gqsj=false
          this.btnclck=false
        }
      }
    },
    methods: {
      setCookie: function (cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        console.info(cname + "=" + cvalue + "; " + expires);
        document.cookie = cname + "=" + cvalue + "; " + expires;
        console.info(document.cookie);
      },
      //获取cookie
      getCookie: function (cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
        }
        return "";
      },
      //清除cookie
      clearCookie: function () {
        this.setCookie("username", "", -1);

      },
      htguj(val){
        if(!val) return
        if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(val)){
//          console.log("格式错误")
          this.htgus=true
          this.btnclck=true
        }else{
          this.htgus=false
          this.btnclck=false
        }
      },
      bzjtb(val){
        if(!val) return
        if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(val)){
//          console.log("格式错误")
          this.tbbzj=true
          this.btnclck=true
        }else{
          this.tbbzj=false
          this.btnclck=false
        }
      },
      phone1(val){
          if(!val) return
          if(! /^1[34578]\d{9}$/.test(val)){
            this.phonego=true
            this.btnclck=true
        }else{
            this.phonego=false
            this.btnclck=false
          }
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
//        console.log(file, fileList);
      },
      handlePreview(file) {
//        console.log(file);
      },
      doSomethingElse(e){
        var str=$(e.currentTarget).val()
        var sret=str.substring(str.lastIndexOf("\\")+1);
//        console.log(sret)
        var pos = str.lastIndexOf(".");
        var lastname = str.substring(pos,str.length);
        if ((lastname.toLowerCase() != ".zip" )&&(lastname.toLowerCase() != ".rar")) {
          if(str){
            this.wenjian=true
            this.input77=sret
            this.btnclck=true
          }
//          alert("文件必须为.zip或.rar类型");
          return false
        }else{
            var that=this
            var reader = new FileReader();
            reader.readAsDataURL(this.$refs.absd.files[0]);
            console.log(this.$refs.absd.files[0].size/1024/1024+"M")
          if(this.$refs.absd.files[0].size/1024/1024 <= 10){
            reader.onprogress=function(){
            }
              reader.onload = function(e){
              that.fileds=e.target.result
              that.flag = 1
//            alert(that.fileds)
            }
            that.input77=sret
            that.wenjian=false
            that.btnclck=false
          }else{
            that.$message.error('文件太大,请合理上传');
          }


        }
      },
      dsb1(){
//        console.log(this.checkList)
      },
      dsb2(){
        this.value101=this.format(this.value1, 'yyyy-MM-dd HH:mm:ss')
      },
      dsb3(){
//        console.log(this.value)
      },
      format(time, format) {
        var t = new Date(time);
        var tf = function(i){return (i < 10 ? '0' : '') + i};
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
          switch(a){
            case 'yyyy':
              return tf(t.getFullYear());
              break;
            case 'MM':
              return tf(t.getMonth() + 1);
              break;
            case 'mm':
              return tf(t.getMinutes());
              break;
            case 'dd':
              return tf(t.getDate());
              break;
            case 'HH':
              return tf(t.getHours());
              break;
            case 'ss':
              return tf(t.getSeconds());
              break;
          }
        })
      },
      enter(e){

        if(	this.value == "" || this.value101 == "" || this.gqsj || this.input01 == ""|| this.htgus ||this.input5 == "" || this.tbbzj || this.input02 == "" || this.lxr || this.input7 == "" || this.phonego || this.input8 == "" || this.wenjian || this.input77 == "" || this.input == "" || this.input1 == "" || this.input2 == ""|| this.input6 == "" || this.input8 == ""
        ){
          this.btnclck=true

        }else{
          this.btnclck=false
        }
      },
      leave(e){
        this.btnclck=false
      },
      submitd(){
        var  that=this
        let vale1, vale2, vale3
          if(that.checked1){
            vale1=0
          }else{
            vale1=1
          }
        if(that.checked2){
          vale2=0
        }else{
          vale2=1
        }
        if(that.checked3){
          vale3=0
        }else{
          vale3=1
        }


        let map={
          'userId':sessionStorage.getItem('userId'),               // '用户ID',
          'classification':this.value,       //  '分类编号',
          'projectName':this.input,        // '工程名称',
          'tenderee':this.input1,            // '招标单位',
          'tenderAddress':this.input2,      // '招标地址',
          'tenderCompany':this.input3,      //  '招标代理机构',
          'schedule':this.input01,          // '工期时间',
          'agreementPrice':this.input5,    // '合同估算价',
          'contractStatus':vale1,       // 0:固定总价合同;1:非固定总价合同',
          'billStatus':vale2,         // '增值税专用发票:0,需要;1,不需要',
          'priceStatus':vale3,        // '超价废标:0,选定;1,未选定',
          'tenderMoney':this.input02,         //  '招标保证金',
          'projectLocation':this.input6,  // '项目地点',
          'endDate1' :this.value101,           // '投标文件递交截止时间',
          'contactName' :this.input7,       //  '联系人',
          'contactMobile':this.input8,      //  '手机号',
          'explainl'  :this.textarea2,          // '项目说明',
          'bidFile':this.fileds,          // '招标文件',
          'tenderFile':this.input77

        }
        if(that.flag==1){
          $.ajax({
            type: "post",
            url: local+"/awm/tender/tenderNeed",
//             url:'http://192.168.3.136:9095/awm/tender/tenderNeed',
            data: map,
            dataType: "json",
            beforeSend:function (xhr) {
              xhr. withCredentials=true
            },
            success: function(data){
              if(data.resultData==0){
                that.$message.error('信息提交失败，请重新提交');

              }else if(data.code==202){
                sessionStorage.clear()
                //清除cookie
                that.setCookie("login", "", -1);
                that.$message.error('登录过期请重新登录');
                that.$router.push({path: '/Entry',query: {redirect:'/Releasetender'}})
              }else{
                that.$router.push({path: '/Tenderhall',query: { id:data.resultData}})
              }
//              console.log(data)
            },
            error:function(aa){
//              console.log(aa)
            }
          });
        }else{
          that.$message.error('正在上传文件，请稍后片刻。。。')
        }

      }
    },
    mounted () {
    },
    components: {

    }
  }
</script>

<style scoped>
  .ntives{
    width:95%;
    height:100%;
    margin:0 auto;
    /*background:paleturquoise;*/
  }
 .b-box_p{
    width:1100px;
    height:40px;
    margin:0 auto;
   border-bottom: 1px solid #ff8328;
   text-align: left;
  }
  .b-box_p span{
    width:130px;
    height:40px;
    line-height: 40px;
    display: inline-block;
    background: #ff8328;
    color: #fff;
    text-align: center;
  }
  .goodg{
    border:none;
  }
  .goodg tr td{
    position:relative;
  }
  .goodg tr td label{
    float:left;
    width:160px;
    height:36px;
    line-height: 36px;
    margin-left:20%;
    text-align: right;
  }
  .goodg tr .bdbdbe label{
    margin-left:1px;
  }
  .goodg tr td .el-select {
    float:left;
    width:40%;
  }
  .goodg tr td .el-select .el-input{
    width:100%;
  }
  .goodg tr td .el-checkbox-group label{
    float:left;
    width:125px;
    height:36px;
    line-height: 36px;
    margin-left:0;
  }
  .goodg .el-select-dropdown__item.selected.hover {
    background-color:  #ff8328;
  }
  .goodg tr td .el-input{
    float:left;
    width:40%;
  }
  .goodg tr td .el-input .el-input__inner{
    text-align: center;
  }
  .goodg tr td .rilit{
    width:33%;
  }
  .goodg tr td .rilit_pay{
    width:15%;
    margin-left: 13px;
  }
  .goodg tr td .rilit_paspan{
    width:20%;
    color:red;
  }
  .goodg tr td span{
    width:50px;
    height:36px;
    line-height:36px;
    float:left;
  }
  .fileId1_box{
    position: relative;
    width: 36%;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 1;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    float: left;
    margin-left: 20px;
  }
  .fileId1_box1,#fileId1{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 1;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    float: left;
    /*margin-left: 20px;*/
  }
  #bbq7{
    width:80%;
    height:100%;
    /*background:red;*/
    border:none;
    display: block;
    margin:0;
    text-align: center;
    float:left;
  }
  #bbq8{
    width:19%;
    height:100%;
    float:right;
    color:#fff;
    position: absolute;
    top:0;
    right:0;
    background:#ff8328;
  }
  #fileId1{
    opacity: 0;
  }
  .el-date-table td.today{
    /*background-color: #ff8328 !important;*/
    color: #fff;
  }
  .el-textarea {
    float:left;
    display: inline-block;
    width: 40%;
    vertical-align: bottom;

  }
 .el-upload-list .el-upload-list--text{
   width:200px;
 }

  .upload-demo{
    width:300px;
    background:red;
    float:left;
  }
  .upload-demo .el-upload-list {
    width:200px;
    background:yellow;
  }
  .el-button{
    width: 100%;
    float: left;
  }
  .el-button--success {
    color: #fff;
    background-color: #ff8328;
    border-color: #ff8328;
  }
  .b_iddq{
   display: inline-block;
    width:7px;
    height:10px;
    font-style: normal;
    margin-right:8px;
    background:url("../assets/fire.png") no-repeat;
    background-size: 7px 7px;
  }
  .error_tip{
    width:25%;
    position:absolute;
    right:0;
    top:0;
    height:50px;
    line-height:62px;
    color:#d43030;
    text-indent: 25px;
    text-align: left;
    background:url("../assets/error1.png") no-repeat left 20px;
  }
  .el-checkbox__label{
    color:red;
  }
</style>
